<script src="./script.js"></script>
<style src="./style.css"></style>
<template>
  <div class="app-container">

    <div class="filter-container">

      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>

    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="拣货单编号" size="mini" prop="id" align="center" width="120">
        <template slot-scope="{row}">
          <el-link type="primary">{{ row.id }}</el-link>
        </template>
      </el-table-column>

      <el-table-column label="拣货状态">
        <template slot-scope="{row}">
          <el-tag v-if="row.state === 'PICKING'" type="info" effect="dark">拣货中</el-tag>
          <el-tag v-if="row.state === 'FINISHED'" type="success" effect="dark">已完成</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="pack(row.id)">打包验货</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

  </div>
</template>
